/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { Row, Col, Button } from 'antd';

interface DataCardType {
  screenSize?: boolean;
  data?: any;
  tabList?: any;
  style?: any;
  titleSpan?: any;
}

interface ColumnType {
  title: string;
  dataIndex: string;
  operateText?: any;
  operate?: any;
  operateStyle?: any;
}

const CommonCard = (props: DataCardType) => {
  const { tabList = [], data = {}, screenSize, style = {}, titleSpan } = props;
  return (
    <Row style={{ ...style }}>
      {tabList.map((item: ColumnType) => (
        <Col key={item.dataIndex} span={screenSize ? 24 : 12}>
          <Row>
            <Col
              {...(titleSpan || {
                span: 8,
                offset: screenSize ? 0 : 4,
              })}
              style={{ textAlign: 'right' }}
            >
              {item.title}:
            </Col>
            <Col span={screenSize ? 14 : 11} offset={1}>
              <Row justify={item.operateText ? 'space-between' : 'start'}>
                {data[item.dataIndex] || '--'}
                {!!item.operateText && (
                  <Button size='small' {...item.operateStyle} onClick={item.operate}>
                    {item.operateText}
                  </Button>
                )}
              </Row>
            </Col>
          </Row>
        </Col>
      ))}
    </Row>
  );
};
export default CommonCard;
